<template>
  <Modal
    v-model="show"
    :title="title"
    :footer-hide="true"
    :loading="load"
    :width="1000"
    @on-cancel="cancel"
  >
    <search-table
      :data="systemList"
      :columns="systemCol"
      :page.sync="queryParams.pageIndex"
      :size.sync="queryParams.pageSize"
      :total="systemTotal"
      :loading="systemListLoading"
      @queryFun="getList"
    >
      <template slot="search">
        <Input v-model.trim="queryParams.name"  clearable placeholder="业务系统名称" @on-change="searchName" style="width: 180px;margin-left: 15px" />
        <Button class="header-btn" type="primary" ghost style="height: 32px;margin-left: 5px;" @click="refreshList()">
          <i class="el-icon-refresh-right" />
        </Button>
      </template>
    </search-table>

  </Modal>

</template>
<script>
import {
  querySystemList,
  updateSystem,
  relativeSystemBatch
} from '../api/system'
import {relativeSystemCol} from "../configData/relativeSystemCol";

export default{
  name:'relativeSystem',
  data(){
    return{
      queryParams:{
        pageIndex:1,
        pageSize:10
      },
      load:false,
      title:'关联业务系统',
      show:false,
      selectRelativeList:[],
      extraParams:{},
      systemCol:[],
      actionButtons:[
        {
          txt: '关联',
          on:{
            click:(data,e) => {
              this.BindrelativeSystem(data);
            }
          },
        },
        // {
        //   label: '查看',
        //   fn: (obj) => {
        //     this.detailModalData.show = true
        //     this.detailInfo = obj
        //   }
        // },
        // {
        //   label: '部署情况',
        //   fn: (obj) => {
        //     this.currentInfo = obj;
        //     this.showDeployModal()
        //   },
        // },
      ],
      systemList:[],
      systemTotal:0,
      systemListLoading:false,


      caseNum:0,
      caseSelList:[],
    }

  },
  props:{
    productId:{
      type:String,
      default:''
    }
  },
  methods:{
    BindrelativeSystemBatch(){
      let ids = this.$refs.baseTable.selectTags.map(m=>m.id);
      if(!ids.length){
        this.$Message.error('请至少选择一个业务系统');
        return;
      }
      console.log(ids,this.productId)
      relativeSystemBatch({productId:this.productId},ids).then(res=>{
        if(res.code==1){
          this.$Message.info('批量绑定成功');
          this.getList();
          this.$refs.baseTable.selectAllCancel();
          this.$emit('refresh');
        }else{
          this.$Message.error(res.message);
        }
      })
    },
    BindrelativeSystem(obj){
      obj.productId = this.productId
      updateSystem(obj).then(res=>{
        if(res.code===1){
          this.$Message.info('关联成功');
          this.getList();
          this.$emit('refresh');
        }else{
          this.$Message.error(res.message);
        }
      })
    },
    setSelectRelativeList(list){
      this.selectRelativeList = [...list];
    },
    closableTag(row) {
      this.$refs.baseTable.deleteSelectData(row)
    },
    searchName(){
      this.queryParams.pageIndex = 1;
      this.getList()
    },
    freshList(){
      this.queryParams = {
        pageIndex: 1,
        pageSize: 10
      }
      this.getList()
    },
    openModal(){
      this.show = true;
      this.getList();
    },
    getList(isRefresh){
      // 列表
      if (!isRefresh) { // 非刷新操作才需要展示等待中的画面
        this.systemListLoading = true
      }
      this.queryParams.onProduct = false;
      querySystemList(this.queryParams)
        .then(res => {
          if (res.code == 1) {
            this.systemTotal =res.data.total;
            this.systemList = res.data.items
          }
          this.systemListLoading = false
        })
        .catch(err => {
          this.systemListLoading = false
        })
    },
    cancel(){
      this.$refs.baseTable.selectAllCancel();
      this.show = false;
      this.load = true;
      this.$nextTick(()=>{
        this.load = false;
      })
      this.caseSelList = [];
      this.caseNum = 0;
    }
  },
  mounted() {
    this.systemCol = relativeSystemCol(this);
    // this.columns.unshift({
    //   type: 'selection',
    //   width: 60
    // })
  }
}
</script>

